Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowIntall Later
Intall Later
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="img"></div> <div class="container"> <div class="stand"></div> <div class="fan"> <span></span> <span></span> <span></span> </div> <div class="circle"></div> <div class="stand1"></div> <div class="fan1"> <span></span> <span></span> <span></span> </div> <div class="circle1"></div> <div class="stand2"></div> <div class="fan2"> <span></span> <span></span> <span></span> </div> <div class="circle2"></div> </div></body></html>xxxxxxxxxx@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);*,:after,:before { box-sizing: border-box; padding: 0; margin: 0;}.container{ width: 1350px; height: 400px;}body{ position: absolute; width: 100%; height: 100vh; background: url(https://www.frontendforever.com/uploads/assets/bg1.jpg); background-size: cover;}.stand{ position: absolute; width: 4%; height: 55%; background: linear-gradient(90deg,#ffffff,#6c6666); box-shadow:inset -10px -10px 5px gray,inset 5px 5px 10px gray; left: 630px; bottom: 0%; border-bottom: 3px solid rgba(0,250,0,0.2);} .fan{ position: relative; width: 80px; height: 80px; background:radial-gradient(#20BDFF,#5433FF); margin-left: 618px; margin-top: 20%; border: 1px solid black; border-radius: 50%; animation: rotate 15s linear infinite;}@keyframes rotate{ from{ } to{ transform: rotateZ(360deg); }}.fan span{ background: linear-gradient(90deg,skyblue,grey); width: 50%; height: 300px; border-radius: 50% 50% 0px 0px;}.fan span:nth-child(1){ position: absolute; left: -120px; top: -30px; transform: rotateZ(-120deg);}.fan span:nth-child(2){ position: absolute; left: 160px; top: -30px; transform: rotateZ(120deg);}.fan span:nth-child(3){ position: absolute; left: 20px; top: -270px; transform: rotateZ(360deg);}.circle{ width: 50px; height: 50px; background: radial-gradient(gray,white); border-radius: 50%; position: absolute; border: 1px solid gray; left: 634px; top: 285px;}/*----------------------------------------*/.stand1{ position: absolute; width: 3%; height: 35%; background: linear-gradient(90deg,#ffffff,#6c6666); box-shadow: inset -3px -3px 5px gray,inset 5px 5px 10px gray; left: 155px; bottom: 0%; border-bottom: 3px solid rgba(0,250,0,0.2);}.fan1{ position: relative; width: 60px; height: 60px; background:radial-gradient(#20BDFF,#5433FF); border: 1px solid black; margin-left: 145px; margin-top: 4%; border-radius: 50%; animation: rotate 15s linear infinite;}.fan1 span{ background: linear-gradient(90deg,skyblue,gray); width: 40%; height: 150px; border-radius: 50% 50% 0px 0px;}.fan1 span:nth-child(1){ position: absolute; left: -50px; top: -5px; transform: rotateZ(-120deg);}.fan1 span:nth-child(2){ position: absolute; left: 90px; top: -5px; transform: rotateZ(120deg);}.fan1 span:nth-child(3){ position: absolute; left: 20px; top: -130px; transform: rotateZ(360deg);}.circle1{ width: 40px; height: 40px; background: radial-gradient(gray,white); border-radius: 50%; position: absolute; border: 1px solid gray; left: 155px; bottom: 200px;}/*---------------------------------------------*/.stand2{ position: absolute; width: 3%; height: 35%; background: linear-gradient(90deg,#ffffff,#6c6666); box-shadow: inset -3px -3px 5px gray,inset 5px 5px 10px gray; right: 160px; bottom: 0%; border-bottom: 3px solid rgba(0,250,0,0.2);}.fan2{ position: relative; width: 60px; height: 60px; background:radial-gradient(#20BDFF,#5433FF); border: 1px solid black; margin-left: 1140px; margin-top: -4%; border-radius: 50%; animation: rotate 15s linear infinite;}.fan2 span{ background: linear-gradient(90deg,skyblue,gray); width: 40%; height: 150px; border-radius: 50% 50% 0px 0px;}.fan2 span:nth-child(1){ position: absolute; right:80px; top: -5px; transform: rotateZ(-120deg);}.fan2 span:nth-child(2){ position: absolute; right: -50px; top: -5px; transform: rotateZ(120deg);}.fan2 span:nth-child(3){ position: absolute; right: 20px; top: -130px; transform: rotateZ(360deg);}.circle2{ width: 40px; height: 40px; background: radial-gradient(gray,white); border: 1px solid gray; border-radius: 50%; position: absolute; right: 156px; bottom: 192px;}xxxxxxxxxxconsole.log("Event Fired")